[Android] Lottieでかわいいアニメーションを表示してみた

[Android] Lottieでかわいいアニメーションを表示してみた

Clock Icon2018.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

モバイルアプリサービス部の浜田です!

最近、アプリを使っていると軽快なアニメーションを見かけることが増えてきました。

どう実装されているの?GIF画像?それともコードでゴリゴリ書くの?と思って調べてみると、「Lottie」というライブラリが見つかったので、Android向けのライブラリを試してみました。

iOS向けのライブラリについては以下の記事を参考にしてください。

Lottieとは

Adobe After Effects」で作成されたアニメーションは、「Bodymovin」という拡張機能を使用することでJSONファイルとして出力できます。

このJSONファイルを使用して、Lottieは様々なプラットフォームで同じアニメーションを表示・制御できます。

2018年12月現在、以下のプラットフォーム向けのライブラリが活発に開発・メンテナンスされているようです。

そのほか、モバイル(Xamarin、NativeScript、Titanium、Windows UWP)、Webフレームワーク(React、Vue、Angular)向けのライブラリが、Lottieコミュニティの有志によって開発されています。

環境

Android Studio

Android Studio 3.2.1
Build #AI-181.5540.7.32.5056338, built on October 9, 2018
JRE: 1.8.0_152-release-1136-b06 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.14.2

動作検証端末

下記設定のエミュレータ。

  • Pixel 2 Android 9.0 (API 28) x86
  • Nexus 4 Android 4.4 (API 19) x86

使用するライブラリのバージョン

この記事ではLottie for Androidのバージョン2.8.0を使用しました。

下記のコミットでREADMEに記載されたとおり、2.8.0以降のバージョンはAndroid Xのプロジェクトでのみ使用できます。

Lottie 2.8.0 and above only supports projects that have been migrated to androidx for more information, read Google's migration guide.

新規プロジェクトの作成

まず、Android Studioを使用して新規プロジェクトを作成します。 以下の設定で、アプリケーション名などは任意のものを指定してください。

  • Create Android Project:
    • include Kotlin support: ON
  • Target Android Devices:
    • Phone and Tablet: ON
  • Add an Activity to Mobile:
    • Empty Activityを選択
  • Configure Activity:
    • Activity Name: MainActivityを入力
      • Generate Layout File: ON
    • Layout Name: activity_mainを入力
      • Backwards Compatibility (AppCompat): ON

Android Xのプロジェクトへ移行

Android Studio 3.2.1で作成した新規プロジェクトは、まだAndroid Xを利用する設定にはなっていません。使用するLottieのバージョン2.8.0ではAndroid Xのプロジェクトのみサポートしているため、移行する必要があります。

Android StudioのメニューからRefactor > Migrate to AndroidX...を実行して、各種ファイルをAndroid Xの設定に移行します。

build.gradleにLottieのリポジトリを追加

dependencies {
    // ...
    implementation "com.airbnb.android:lottie:2.8.0"
    // ...
}

アニメーションのJSONファイルを入手

今回は「LottieFiles - Free animation files build for Lottie, Bodymovin」というWebサイトで公開されている以下のアニメーションのファイルを使用させていただきました。

JSONファイルをプロジェクトに追加

ダウンロードしたファイルをプロジェクトのrawリソースフォルダに追加します。

JSONファイルの保存先

レイアウトにアニメーションを表示するViewを追加

次のようにcom.airbnb.lottie.LottieAnimationViewを追加します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/favourite_app_icon" />

</androidx.constraintlayout.widget.ConstraintLayout>

LottieAnimationViewの独自の属性で次の設定を行っています。

  • app:lottie_rawRes: rawリソースフォルダに追加したfavourite_app_icon.jsonファイルのリソース名を指定しています。
  • app:lottie_autoPlay: 自動で再生を開始するか指定
  • app:lottie_loop: ループ再生するか指定

動作確認

簡単にかわいいアニメーションを表示できました!

さいごに

Google Playで公開されているAirbnb社製のサンプルアプリでLottieの様々な機能を試すことができます。色々調べていきたいと思います。

参考文献

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.